import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {View, Image, Text} from '@tarojs/components';
import {AtSearchBar} from 'taro-ui'
import {GetRequest} from "../../utils/tools";
import {http} from "../../utils/http";
import {TARO_ENV, RESOURCE_URL, APP_SCENIC_LIST} from "../../constants/api";
import classnames from "classnames";
import typeList from './typeList';
import "./index.scss";

const tempMenus = [
    {
        id: 1,
        name: "景点",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930803615_272.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996573809_288.png",
        type: "",
        children: []
    },
    {
        id: 3,
        name: "餐厅",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930682641_302.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996462649_893.png",
        type: "",
        children: []
    },
    {
        id: 4,
        name: "小卖部",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930919809_5.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996695528_101.png",
        type: "",
        children: []
    },
    {
        id: 9,
        name: "医院",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930935962_551.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996710664_309.png",
        type: "",
        children: []
    },
    {
        id: 13,
        name: "住宅",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930950019_557.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996732005_94.png",
        type: "",
        children: []
    },
];
const defaultPhoto = "https://resource.ivcheng.com/upload/images/20220901/1662002123131_56.jpg";

export default class List extends Component {
	constructor(props) {
		super(props);
		this.state = {
			initLoad: true,
			loadFinished: false,
			searchKey: "",
			currentTab: typeList[0].name,
			tabs: typeList,
			listData: []
		};
	}

	componentWillMount() {
        this.getList();
    }
    onReachBottom() {
    	/*if(this.state.loadFinished) return;
    	this.getList();*/
    }
    // get list
    getList = async (typeVal) => {
    	const { location: { params: { id } } } = this.props;
    	const { searchKey, currentTab, tabs } = this.state;
    	typeVal = typeVal || currentTab;
    	Taro.showLoading({title: "加载中", mask: true});
        const res = await http.HGet(APP_SCENIC_LIST, {scenic_id: id, type: typeVal, name: searchKey});
        const datas = res.data || [];

        this.setState(state => ({
        	listData: state.listData.concat(datas),
        	initLoad: false,
        	loadFinished: datas.length < 4 ? true : 0
        }), () => {
        	Taro.hideLoading();
        });
    }
    // search input
    onInputChange = value => {
		this.setState({
			searchKey: value
		})
	};
	// search button
	onClickSearch = () => {
		console.log('开始搜索')
		const { currentTab } = this.state;
		this.setState({
			initLoad: true,
			listData: []
		}, () => {
			this.getList(currentTab);
		});
	};
	// tab change
	handleClickTab(item) {
		this.setState({
			initLoad: true,
			currentTab: item.name,
			listData: []
		}, () => {
			this.getList(item.name);
		});
	}
	// view item
	handleView(item) {
		console.log("view item : ", item);
		const { currentTab } = this.state;
		Taro.navigateTo({
            url: `/other/mapNavigation/index?id=${item.scenic_id}&listId=${item.id}&type=${currentTab}&lat=${item.latitude}&lng=${item.longitude}`
        })
	}

    render() {
    	const { initLoad, currentTab, tabs, listData } = this.state;

    	return (
    		<View className="list-page">
    			<View className="top-area">
	    			<AtSearchBar
						showActionButton
						value={this.state.searchKey}
						onChange={this.onInputChange}
						onActionClick={this.onClickSearch}
					/>
					{/*<View className="tabs">
						{
							tabs.map((item, index) => (
								<View
									className={classnames("tab-item", {
										"active": currentTab === item.name
									})}
									key={index}
									onClick={() => this.handleClickTab(item)}
								>
									<Text className="ti-item">{ item.name }</Text>
								</View>
							))
						}
					</View>*/}
					<View className="tabs-temp">
						{
							tempMenus.map((item, index) => (
								<View
									className={classnames("tab-item", {
										"active": currentTab === item.name
									})}
									key={index}
									onClick={() => this.handleClickTab(item)}
								>
									<Text className="ti-item">{ item.name }</Text>
								</View>
							))
						}
					</View>
				</View>
				<View className="list-area">
					{
						listData.length > 0 &&
						listData.map((item, index) => (
							<View className="list-item" key={index} onClick={() => this.handleView(item)}>
								<View className="left">
									<Image src={item.photo_url || defaultPhoto} mode='aspectFit' className="li-img" />
								</View>
								<View className="right">
									<View className="title-box">
										<View className="title">{item.name}</View>
										<View className="distance">{item.distance}km</View>
									</View>
									<View className="intro" style={{"-webkit-box-orient": "vertical"}}>{item.scenic_remark}</View>
								</View>
							</View>
						))
					}
					{
						!initLoad && listData.length === 0 &&
						<View className="empty-list">
							<Text className="empty-text">暂无数据</Text>
						</View>
					}
				</View>
    		</View>
    	)
    }
}
